<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.name" placeholder="请输入名称" clearable />
      </el-form-item>
  
      <el-form-item>
        <el-button type="primary" @click="loadProjectList">查询</el-button>
      </el-form-item>
    </el-form>
  
    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleSaveProject(null)">添加项目</el-button>
    </div>
    <el-table :data="projectList" stripe>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="courseName" label="课程" />
      <el-table-column prop="schoolName" label="学校" />

      <el-table-column prop="amount" label="金额" />

      <el-table-column prop="startDate" label="开始时间" />
      <el-table-column prop="endDate" label="结束时间" />

      <el-table-column prop="status" label="状态" />
      <el-table-column prop="payStatus" label="支付状态" />

      <el-table-column prop="engineerName" label="工程师" />
   

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleSaveProject(scope.row.id)">编辑</el-button>
        
          <el-button size="small" style="margin-left: 2px;" @click="handleBindEngineer(scope.row.id)">安排工程师</el-button>
        

          <el-button size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>


  
  <!--绑定工程师对话框-->
  <el-dialog v-model="bindEngineerVisible" title="绑定工程师">
 
    <el-select style="width:200px" v-model="engineerId" placeholder="请选择工程师">
          <el-option v-for="(item, index) in engineerList" :key="index" :label="item.name" :value="item.id" />
    </el-select>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="bindEngineerVisible = false">关&nbsp;&nbsp;闭</el-button>
        <el-button type="primary" @click="handleSaveBind">提&nbsp;&nbsp;交</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { reactive, ref} from "vue";
import { useRouter } from "vue-router";
import {getProjectList,deleteProjectById,bindEngineer} from  "@/api/project"
import {getEngineerList} from  "@/api/engineer"
import { ElMessageBox,ElMessage } from 'element-plus'
  
const router = useRouter();

const queryForm=reactive({name:null,page:1,pageSize:10});

let projectList=reactive([]);
  
let total=ref(0);


let currentProjectId=ref(null);
let bindEngineerVisible=ref(false);
let engineerId=ref(null);
let engineerList=reactive([]);

 
let handleSaveProject=(projectId:number)=>{
  if(projectId){
    //编辑
    router.push({ path: '/project/save',query:{projectId:projectId}})
  }else{
    //添加
    router.push({ path: '/project/save'})
  }
}

  
let handleBindEngineer=(projectId:number)=>{
  bindEngineerVisible.value = true;
  currentProjectId.value = projectId;

  if(engineerList.length==0){

    getEngineerList().then(resp=>{
      engineerList.push(... resp);
    }) 
  } 
}

let handleSaveBind=()=>{
  if(engineerId.value || currentProjectId.value){
    ElMessage.error("必须选择指定工程师");
    return 
  }


  bindEngineer(currentProjectId.value,engineerId.value).then(resp=>{
    if(resp.code == 200){
      bindEngineerVisible.value = false;
      ElMessage.success("绑定成功");
    }else{
      ElMessage.error("绑定失败");
    }
  }).catch(error=>{

  });
}






let handleDelete=(projectId)=>{
  //确认对话框
  ElMessageBox.confirm(
      "是否删除?",
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //发送请求
    deleteProjectById(projectId).then(resp=>{
      loadProjectList()
    })
  }).catch(()=>{
  })
}

 

//定义方法
let loadProjectList=()=>{
  //准备数据
  getProjectList(queryForm).then((resp)=>{
    projectList.length = 0;
    projectList.push(... resp.data);

    total.value=resp.total;
  });
}

let handleSizeChange=(pageSize)=>{
  queryForm.pageSize = pageSize;
  loadProjectList()
}

let handlePageChange=(page)=>{
  queryForm.page = page;
  loadProjectList();
}

loadProjectList();
</script>

<style scoped>
</style>

<style>
.form-inline .el-select {
  --el-select-width: 220px;
}
</style>
